<template>
  <div >
    <van-dialog id="van-dialog" />

    <div style="text-align: right; padding-right: 42rpx; border-bottom: 1px solid #ccc;padding-bottom: 20rpx" >
      <van-button type="info"  size="small" @tap="addNewUserShow" >添加新用户</van-button>
    </div>

      <view>

        <block   v-for="(item, index) in userlist"  :key="index" >
          <i-row class="row-order">
            <i-col span="7" i-class="col-class" @tap="goInfo(item._id)">
              <view class="table_parent">{{item.username}}</view>
            </i-col>
            <i-col span="16" i-class="col-class">
              <view class="table_parent">
              <van-button class="toolsbtn" @tap.stop="resetPasswords(item._id)" type="info" size="small">重置密码</van-button>
                <span v-if="item.disable">
                <van-button class="toolsbtn" @tap.stop="disableUser_no(item._id)" type="warning" size="small" plain>启用账户</van-button>
                </span>
                <span v-else>
                <van-button class="toolsbtn" @tap.stop="disableUser(item._id)" type="warning" size="small" >停用账户</van-button>
                </span>
              <van-button class="toolsbtn" @tap.stop="delUser(item._id)" type="danger" size="small">删除账户</van-button>
              </view>
            </i-col>

          </i-row>
        </block>
      </view>


    <van-dialog
      id="submitCaseDialog"
      use-slot
      title="添加新用户"
      :show="dialogAddNewFormShow"
      show-cancel-button
      async-close
      @close="onClose"
    >
      <van-notify id="van-notify" />

      <view style="padding: 44rpx">
      <van-cell-group >

        <van-field
          required
          label="用户名"
          :value="userVal_.username"
          placeholder="请输入用户名"
          @change = "changeUsername"
          border = true
        />

        <van-field
          label="密码"
          :value="userVal_.password"
          placeholder="默认密码1111"
          @change = "changepassword"
          border = true
        />
        <van-field
          label="姓名"
          :value="userVal_.surname"
          placeholder="可不填写"
          @change = "changesurname"
          border = true
        />
        <van-field
          label="手机"
          :value="userVal_.phone"
          placeholder="可不填写"
          @change = "changephone"
          border = true
        />
        <van-field
          label="推荐人"
          :value="userVal_.recommend"
          placeholder="可不填写"
          @change = "changerecommend"
          border = true
        />

      </van-cell-group>
        </view>

    </van-dialog>
    <van-toast id="van-toast" />

  </div>
</template>

<script>
  import Notify from '../../../static/vant/notify/notify';
  import Dialog from '../../../static/vant/dialog/dialog';
  import Toast from  '../../../static/vant/toast/toast';

  import {userList,userAdd,userEdit,userDel} from '../../api/basisMG'


  export default {
  data () {
    return {
      dialogAddNewFormShow:false,
      userlist:[],
      userVal_:{
        username:"",
        password:1111,
        phone:"",
        surname:"",
        recommend:""
      }

    }
  },
  beforeMount(){

    },

  onShow(){this.rowdata()},
  mounted(){this.rowdata()},
  methods: {




    changeUsername(data){
      this.userVal_.username = data.mp.detail
    },
    changepassword(data){
      this.userVal_.password = data.mp.detail
    },
    changesurname(data){
      this.userVal_.surname = data.mp.detail
    },
    changephone(data){
      this.userVal_.phone = data.mp.detail
    },
    changerecommend(data){
      this.userVal_.recommend = data.mp.detail
    },
    addNewUserShow(){
        this.dialogAddNewFormShow = true
    },
    getAdduser(){
      let t = this
      let timestamp = Date.parse(new Date());
      timestamp = timestamp / 1000;
      this.userVal_.addtime = timestamp

      if(!this.userVal_.password){
        this.userVal_.password="1111"
      }else{
        this.userVal_.password= this.userVal_.password+""
      }


      userAdd(t.userVal_).then(res => {

        if(res.data==0){
          Notify({ type: 'danger', message: "用户名 【"+t.userVal_.username+' 】已被使用' });
          setTimeout(function() {
            ;  t.$mp.page.selectComponent("#submitCaseDialog").stopLoading()
          },3000)
        }else{
          Notify({ type: 'success', message: "用户 【"+t.userVal_.username+' 】添加成功！' });
          setTimeout(function() {
            t.dialogAddNewFormShow=false
            t.userVal_ = {}
            t.userVal_.password="1111"
            t.rowdata()
          },2000)
        }
      })


    },

    onClose(e){
      let self = this
      if(e.mp.detail === 'confirm') {
        if(!this.userVal_.username || !this.userVal_.password||this.userVal_.username.length<3) {
          Notify({ type: 'danger', message: "请输入用户名密码"});
          setTimeout(function() {
            ;  self.$mp.page.selectComponent("#submitCaseDialog").stopLoading()
          },3000)
        }else{
          this.getAdduser(this.userVal_)
        }
      } else if(e.mp.detail === 'cancel') {
        this.dialogAddNewFormShow=false
      }
    },

    resetPasswords(_id){
      let t = this
      Dialog.confirm({
        message: '确定是否重置密码？'
      }).then(() => {
        userEdit({"_id":_id,"password":"1111"}).then(res=>{
          if(res){
            Toast.success('重置成功！');
          }
        })
      }).catch(() => {
        // on cancel
      });
    },

    disableUser_no(_id){
      let t = this
      Dialog.confirm({
        message: '确定启用账户？'
      }).then(() => {
        wx.cloud.init({
          env: t.globalData.env
        })
        Toast.loading({
          message: '加载中...'
        });
        wx.cloud.callFunction({
          name: 'resetPasswords',
          data:{
            _id:_id,
            keyname:{"disable":0}
          },
          success(res) {
            if(res){
              t.rowdata()
              Toast.success('启用成功！');
            }
          }
        })
      }).catch(() => {
        // on cancel
      });
    },

    disableUser(_id){
      let t = this
      Dialog.confirm({
        message: '确定停用账户？'
      }).then(() => {
        wx.cloud.init({
          env: t.globalData.env
        })
        Toast.loading({
          message: '加载中...'
        });
        wx.cloud.callFunction({
          name: 'resetPasswords',
          data:{
            _id:_id,
            keyname:{"disable":1}
          },
          success(res) {
            if(res){
              t.rowdata()
              Toast.success('停用成功！');
            }
          }
        })
      }).catch(() => {
        // on cancel
      });
    },


    delUser(_id){
      let t = this
      Dialog.confirm({
        message: '确定删除账户？'
      }).then(() => {

        userDel({"_id":_id}).then(res => {
          if(res){
            this.rowdata()
            Toast.success('删除成功！');
          }
        })

      }).catch(() => {
        // on cancel
      });
    },

    getUserInfo(){
      this.dialogAddNewFormShow=false

    },



    rowdata(){

      userList().then(res => {
        if(res.data.length){
          this.userlist = res.data;
        }
      })
    },

    goInfo(d){
      wx.navigateTo({
        url: "/pages/manageUser_info/main?id="+d
      })

    },


    bindViewTap () {
      const url = '../logs/main'
      if (mpvuePlatform === 'wx') {
        mpvue.switchTab({ url })
      } else {
        mpvue.navigateTo({ url })
      }
    },
    clickHandle (ev) {
      // throw {message: 'custom test'}
    }
  }
}
</script>

<style >

  .toolsbtn{
    margin: 0 4rpx;
  }
  /*.van-row{*/
    /*background: #fff;*/
  /*}*/

  .block-order{
    margin-top: 95rpx;
  }

  .header-row{
    position: fixed;
    width: 100%;
    line-height: 2;
    margin-top: -1rpx;
    border-bottom: 1rpx solid #ccc;
  }


  .row-order{
    line-height: 2;
  }

  .row-order .van-row{
    border-bottom: 1rpx solid #eee;
  }

  page {
    background-color: #fff;
  }

  .table_parent {
    display:flex;
    justify-content:left;
    text-indent: 14rpx;
    align-items:center;
    background: white;
    font-size:30rpx;
    text-align:center;
    box-sizing:border-box;
    color:#595a5e;
    padding-top: 20rpx;
    padding-bottom: 20rpx;
  }
  .table {
    border: 1px solid #dadada;
    border-right: 0;
    border-bottom: 0;
    width: 98%;
  }

  .tr {
    width: 100%;
    display: flex;
    justify-content: space-between;
  }

  .th, .td {
    padding: 10px;
    border-bottom: 1px solid #dadada;
    border-right: 1px solid #dadada;
    text-align: left;
    width: 100%;
  }

  .th {
    font-weight: 400;
    background-color: #dadada;
  }

</style>
